<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小椰货栈</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/ydui.flexible.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/ydui.js"></script>
    <script src="js/nuoxia.js"></script>
    <link rel="stylesheet" href="css/ydui.css">
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/nuoxia.css">
</head>

<body>
    <div class="classh" id="classh">
        <div class="classh_top">
            <div class="nav">
                <img src="icon/search1.png" alt="" srcset="">
                <span id="nav">
                    <a @click="navclick(item.id,index+1)" v-for="(item, index) in navlist" :key="index" href="javascript:void(0)" v-text="item.name">{{item.name}}</a>
                </span>
            </div>
            <div class="nav-price">
                <div class="price-title">
                    <a @click="price_nav_show_change" href="javascript:">价格筛选</a>
                    <img @click="price_nav_show_change" src="icon/bottom.png" alt="" srcset="">
                </div>
                <div v-if="price_nav_show" class="price-ul" id="price_ul">
                    <a @click="priceclick(index+1)" href="javascript:" v-for="(item, index) in price_arry" :key="index" v-text="item"></a>
                </div>
            </div>
        </div>
        <div class="product-list">
            <ul>
                <li v-for="(item, index) in product_arry" :key="index" :style="item.borders">
                    <a href="">
                        <img :src="item.image" alt="">
                        <p v-text="item.name"></p>
                        <h5>￥{{item.shop_price}}</h5>
                    </a>
                    <div v-if="item.isminus" class="product-btn">
                        <a href="javascript:;" class="btn btn-hollow">-</a>
                        <a href="javascript:;" class="btn btn-hollow">+</a>
                    </div>
                    <div v-else="item.isminus" class="product-btn">
                        <a href="javascript:;" class="btn btn-hollow iscart">+</a>
                    </div>
                    <span v-if="item.isminus" class="cartNum">{{item.cartNum}}</span>
                </li>
            </ul>
        </div>
        <div class="product-cart" v-if="cart_show">
            <div class="cart-list" v-if="cart_list_show">
                <div class="cart-list-title">
                    <span>购物车</span>
                    <span @click="cart_list_show_change">取消</span>
                </div>
                <ul>
                    <li v-for="(item, index) in cart_arry" :key="index">
                        <div class="cart-li-fl">
                            <img :src="paraurl+item.goods.image" alt="" srcset="">
                            <p>{{item.goods_name}}</p>
                        </div>
                        <div class="cart-li-fr">
                            <a href="javascript:;">-</a>
                            <span>{{item.goods_num}}</span>
                            <a href="javascript:;">+</a>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="cart-show" @click="cart_list_show_change">
                <div class="cart-show-fl">
                    <p>共{{cart_num}}件</p>
                    <h5>￥{{cart_price}}</h5>
                </div>
                <div class="cart-show-fr">
                    <a href="javascript:;" class="btn btn-danger">立即赠送</a>
                </div>
            </div>
        </div>
    </div>
    <footer class="m-tabbar min-footer tabbar-fixed">
        <a href="index.html" class="tabbar-item">
            <span class="tabbar-icon">
                <img src="icon/tabbarc1.png">
            </span>
            <span class="tabbar-txt">首页</span>
        </a>
        <a href="class.html" class="tabbar-item">
            <span class="tabbar-icon">
                <img src="icon/tabbar2.png">
            </span>
            <span class="tabbar-txt">分类</span>
        </a>
        <a href="service.html" class="tabbar-item">
            <span class="tabbar-icon">
                <img src="icon/tabbarc3.png">
            </span>
            <span class="tabbar-txt">客服</span>
        </a>
        <a href="my.html" class="tabbar-item">
            <span class="tabbar-icon">
                <img src="icon/tabbarc4.png">
            </span>
            <span class="tabbar-txt">我的</span>
        </a>
    </footer>
    <script>
        window.onload = function () {
            var token = window.localStorage.getItem("token");
            var classh = new Vue({
                el: "#classh",
                data: {
                    paraurl: paraurl,
                    navlist: [],
                    list: [],
                    price_arry: ["全部", "0-50", "50-200", "200-1000", "1000-3000", "3000以上"],
                    nav_id: 0,
                    nav_index: 1,
                    price_arry_index: 0,
                    price_nav_show: false,
                    product_arry: [],
                    cart_arry: [],
                    cart_num: 0,
                    cart_price: 0,
                    cart_show: false,
                    cart_list_show: false
                },
                filters: {

                },
                mounted: function () {
                    this.classshow();
                    this.cart_list();
                },
                methods: {
                    classshow: function () {
                        var v_this = this;
                        var nav_id = v_this.nav_id;
                        $.ajax({
                            type: "get",
                            url: paraurl + "/api/index/category",
                            data: {
                                category_id:nav_id
                            },
                            success: function (d) {
                                if (d.code == 1) {
                                    var arry = [{ "id": 0, "name": "全部" }]
                                    arry = arry.concat(d.data);
                                    v_this.navlist = arry;
                                    var gps = zm.gParaurl();  
                                    var id = gps.id;
                                    for(var i=0;i<arry.length;i++){
                                        if(nav_id==arry[i].id){
                                            v_this.nav_index=i+1;
                                        }
                                    }
                                    v_this.navclick(id,v_this.nav_index);
                                }
                            }
                        })
                    },
                    navclick: function (id, index) {
                        $("#nav a").removeClass("a-select");
                        $("#nav a:nth-child(" + index + ")").addClass("a-select");
                        this.nav_id = id;
                        this.nav_index = index;
                        this.getlist()
                    },
                    priceclick: function (index) {
                        $("#price_ul a").removeClass("price-select");
                        $("#price_ul a:nth-child(" + index + ")").addClass("price-select");
                        this.price_arry_index = index - 1;
                        this.getlist()
                        this.price_nav_show_change()
                    },
                    getlist: function () {//产品列表
                        var v_this = this;
                        var id = v_this.nav_id;
                        if (id == 0) {
                            id = "";
                        }
                        var price_arry_index = v_this.price_arry_index;
                        $.ajax({
                            type: "get",
                            url: paraurl + '/api/goods/index?token=' + token + '&sort=weigh&order=desc&offset=0&limit=1000&filter={"category_id":' + id + '}&op={"category_id":"="}&&price=' + price_arry_index,
                            data: {
                            },
                            success: function (d) {
                                if (d.code == 1) {
                                    var product_arry = d.data.rows;
                                    if (product_arry.length > 0) {
                                        for (var i = 0; i < product_arry.length; i++) {
                                            product_arry[i].image = paraurl + product_arry[i].image;
                                            if (product_arry[i].cartNum > 0) {
                                                product_arry[i].isminus = true;
                                                product_arry[i].borders = "border: solid 0.05rem #dd1f1f;";
                                            } else {
                                                product_arry[i].isminus = false;
                                                product_arry[i].borders = "";
                                            }
                                        }
                                        v_this.product_arry = product_arry;
                                    } else {
                                        v_this.product_arry = [];
                                    }
                                }
                            }
                        })
                    },
                    cart_list: function () {//购物车列表
                        v_this = this;
                        $.ajax({
                            type: "get",
                            url: paraurl + '/api/cart/index?token=' + token,
                            data: {
                            },
                            success: function (d) {
                                if (d.code == 1) {
                                    var cart_arry = d.data.rows;
                                    if (cart_arry.length > 0) {
                                        v_this.cart_show = true;
                                        v_this.cart_arry = cart_arry;
                                        v_this.cart_num = d.data.totalNum;
                                        v_this.cart_price = d.data.totalPrice;
                                    } else {
                                        v_this.cart_show = false;
                                    }
                                }
                            }
                        })
                    },
                    cart_list_show_change: function () {//购物车显示隐藏
                        var cart_list_show = this.cart_list_show;
                        if (cart_list_show == false) {
                            this.cart_list_show = true;
                        } else {
                            this.cart_list_show = false;
                        }
                    },
                    price_nav_show_change: function () {
                        var price_nav_show = this.price_nav_show;
                        if (price_nav_show == false) {
                            this.price_nav_show = true;
                        } else {
                            this.price_nav_show = false;
                        }
                    }
                }
            })
        }
    </script>
</body>

</html>